<template>
	<div class="tl input" :class="{'border':border}" :style="inputStyle" tabindex contenteditable @input="input"></div>
</template>
<script>
	export default {
		props: {
			styles: {
				type: Object,
				default: () => {
					return {}
				}
			},
			border: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				inputStyle: {
					width: '100%',
					height: '100px',
				}
				// isLock: false,
				// timeout: 0
			}
		},
		methods: {
			reset() {
				this.$el.innerHTML = '';
			},
			// isPC() {//是否是pc
			// 	var userAgentInfo = navigator.userAgent;
			// 	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
			// 	var flag = true;
			// 	for (var i = 0; i < Agents.length; i++) {
			// 		if (userAgentInfo.indexOf(Agents[i]) > 0) {
			// 			flag = false;
			// 			break;
			// 		}
			// 	}
			// 	return flag;
			// },
			// onCompositionstart(e) {
			// 	this.isLock = true
			// },
			// onCompositionend(e) {
			// 	this.isLock = false
			// },
			input(e) {
				this.$emit('input', this.$el.innerHTML)
				// // 解决中文输入的时候，直接输出英文字母的问题(中文输入期间，不允许输入字符)
				// setTimeout(function() {
				// 	if (this.isLock) return
				// 	let value = e.target.innerHTML
				// 	// 去除换行符
				// 	value = value.replace(/(\<\/?\w*\>)/g, '').replace(/(\r\n)|(\n)/g, '')
				// 	this.$emit('input', this.$el.innerHTML)
				// }.bind(this), 0)
				// // 如果是pc的话，timeout设置为5就好，ios经测试，使用40才有效果
				// setTimeout(function() {
				// 	this.getCursor(e.target)
				// }.bind(this), this.timeout)
			},
			// getCursor(el) {
			// 	if (window.getSelection) {
			// 		el.focus()
			// 		const sel = getSelection()
			// 		sel.selectAllChildren(el)
			// 		sel.collapseToEnd()
			// 	} else if (document.selection) {
			// 		var range = document.selection.createRange() // 创建选择对象
			// 		range.moveToElementText(el) // range定位到el
			// 		range.collapse(false) // 光标移至最后
			// 		range.select();
			// 	}
			// }
		},
		mounted() {
			const el = this.$el;
			el.innerHTML = this.value;
			// 监听中文输入
			// this.innerTxt = this.value;
			// el.addEventListener('compositionstart', this.onCompositionstart, false)
			// el.addEventListener('compositionend', this.onCompositionend, false);
			// this.timeout = this.isPC() ? 0 : 40;

		},
		created() {
			Object.assign(this.inputStyle, this.styles);
		}
	}
</script>

<style scoped>
	.input {
		-webkit-user-select: text;
		overflow: auto;
		background: #FFFFFF;
		box-sizing: border-box;
		margin-bottom: 1rem;
	}

	.border {
		border: 1px solid #E8E8E8;
	}

	.input:empty:before {
		content: attr(placeholder);
		color: #757575;
		font-size: inherit;
	}
</style>
